<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="false"
      :background="{ background: 'linear-gradient(90deg, #f398a0, #fa3534)' }"
      title="首页"
      title-color="#fff"
    >
    </u-navbar>
    <u-swiper height="300" :list="list"></u-swiper>
    <view class="block" @click="openPrice">
      <image class="img" src="/static/images/home/服务介绍.png"></image>
      <view>价目表</view>
    </view>
    <u-card :title="'服务介绍'">
      <view class="" slot="body">
        <view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
          <view class="u-body-item-title">指尖轻点，洗衣无忧！一键下单，取送上门，全程无需您操心。专业团队精细分拣，运用先进技术和优质洗剂，为各类衣物量身定制清洁方案，让每一次洗护都成为品质焕新。</view>
        </view>
      </view>
    </u-card>
    <u-card :title="'系统公告'">
      <view class="" slot="body">
        <view class="u-body-item u-border-bottom u-col-between u-p-t-0" v-for="item in noticeList">
          <view class="u-body-item-title">{{item.content}}</view>
          <view class="u-body-item-title" style="margin: 0 20rpx;padding: 10px 0;text-align: right;">{{item.time}}</view>
        </view>
      </view>
    </u-card>
    <u-modal title="价目表" :show-title="flase" v-model="show" :show-cancel-button="false" @confirm="show = false" confirm-text="确定">
			<view class="slot-content">
        <image class="p-img" src="/static/images/home/price.png"></image>
			</view>
		</u-modal>
  </view>
</template>

<script>
import moment from "moment";
import { getNotice } from "../../api/system/api";
export default {
  data() {
    return {
      list: [
        {
          image: "/static/images/home/swiper1.jpg",
        },
        {
          image: "/static/images/home/swiper2.jpg",
        },
      ],
      noticeList: [],
      show: false,
    };
  },
  methods: {
    getData() {
      getNotice().then((res) => {
        this.noticeList = res.data.list;
      });
    },
    openPrice() {
      // 跳转到测试页面
      this.$u.route("/pages/home/priceDetail");
    }
  },
  mounted() {
    this.getData();
  },
  onTabItemTap() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f7f7f7;
  min-height: 100vh;
  overflow: hidden;

  .content {
    padding: 20rpx;
  }
}
.img {
  width: 60rpx;
  height: 60rpx;
}
.block {
  margin: 20rpx 36%;
  display: flex;
  align-items: center;
  gap: 20rpx;
  font-weight: bold;
}
.p-img {
  width: 100%;
  height: 86vh;
}
</style>
